<!--
 * @Author: 孙开源 && sunkaiyuan@namenode.cn
 * @Date: 2023-11-10 10:52:07
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @LastEditTime: 2023-11-10 15:23:15
 * @Description: 
 * 
-->

<template>
  <!-- 触发按钮 -->

  <!-- 右侧弹出层 -->
  <el-popover placement="right" :width="250" trigger="click">
    <template #reference>
      <button class="trigger-btn" :style="{ background: defcolor }"></button>
    </template>
    <div class="inline-picker-panel">
      <div class="arrow"></div>
      <color-picker @color-selected="handleColorSelect" class="compact-picker" />
    </div>
  </el-popover>
</template>
<script>
import ColorPicker from "./colorPicker.vue";
export default {
  components: { ColorPicker },
  name: "formatColor",
  props: {
    color: null,
    gridEvents: null,
    row: null,
  },
  data() {
    return {
      defcolor: this.color,
    };
  },
  mounted() {},
  methods: {
    handleColorSelect(color) {
      this.defcolor = color;
      this.gridEvents.selectColor(color, this.row);
    },
  },
};
</script>

<style scoped>
.trigger-btn {
  width: 50px;
  height: 22px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}
.el-popover.el-popper {
  padding: 2px;
}
.trigger-btn:hover {
  transform: translateY(2px);
}
</style>
